<template>
    <div class="attribute-text">
        <div class="edit-data-btn" @click="openEdit">编辑数据</div>
        <div class="main-panel-content-wrap">
            <div class="row-1">
                <div class="main-text-tran-50">滚动速度</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="table.getTableSpeedName()" type="number" class="mas-basis-input mas-basis-input2" @input="table.setTableSpeed(currentElementList[0], JQuery('#' + table.getTableSpeedName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`);" @change="history.addHistory(store.clone(), 126)" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import table from '@/js/main/attribute/table.js';
import store from '@/js/store/state.js';
import history from '@/js/main/history.js';
import JQuery from 'jquery';
import system from '@/js/main/system.js';
import util from '@/js/util/util.js';
import register from '@/js/main/register.js';
import message from '@/js/util/message.js';
import editor from '@/js/main/editor.js';

export default {
    data() {
        return {
            table: table,
            window: window,
            store: store,
            history: history,
            JQuery: JQuery,
            util: util,
            system: system,
            register: register,
            currentElementList: store.getCurrentElementList(),
            editor: {
                visible: false
            }
        };
    },
    mounted() {
        table.setAttribute(this.currentElementList[0]);
    },
    methods: {
        openEdit() {
            editor.setUrl(this.currentElementList[0].data.url);
            editor.setDraggable(true);
            editor.setType(this.currentElementList[0].data.type);
            editor.setMethod(this.currentElementList[0].data.method);
            editor.setValue(this.currentElementList[0].data.value);
            editor.setInterval(this.currentElementList[0].attribute.interval);
            editor.setField(this.currentElementList[0].data.field);
            editor.setComplete(this.complete);
            editor.open();
        },
        complete(completeEditMap) {
            if (completeEditMap.type === 'dynamic') {
                if (!completeEditMap.data.length) {
                    message.message('请先选择数据', 'warning');
                    return false;
                }
                if (!completeEditMap.url) {
                    message.message('请填写url地址', 'warning');
                    return false;
                }
                this.currentElementList[0].data.url = completeEditMap.url;
                let keys = [];
                for (let index = 1; index < completeEditMap.objectKey.length; index++) {
                    keys.push(completeEditMap.objectKey[index]);
                }
                this.currentElementList[0].data.key = keys;
                this.currentElementList[0].data.type = 'dynamic';
                this.currentElementList[0].attribute.interval = completeEditMap.interval;
                this.currentElementList[0].data.method = completeEditMap.method;
            } else {
                this.currentElementList[0].data.type = 'static';
                this.currentElementList[0].data.url = '';
                this.currentElementList[0].data.key = [];
                this.currentElementList[0].data.value = completeEditMap.data;
            }
            register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[0].id}`);
            editor.close();
        }
    }
};
</script>

<style lang="scss" scoped>
.attribute-text {
    .row-1 {
        height: 30px;
        width: 100%;
        display: grid;
        grid-gap: 6px;
        align-items: center;
        font-weight: 600;
        cursor: auto;
        grid-template-columns: 60px 1fr 30px;
    }
    .row-2 {
        height: 30px;
        display: grid;
        column-gap: 6px;
        grid-template-columns: 1fr 1fr 30px;
    }
    .mas-input-top {
        position: relative;
        top: -1px;
    }
    .cur-pointer {
        height: calc(100% - 6px);
        border-radius: 6px;
        &:hover {
            background-color: #ffffff26;
        }
        cursor: pointer;
    }
    .select-background {
        background-color: #ffffff26;
    }
    .text-input-c {
        background-color: #ffffff0f;
        border-radius: 6px;
        margin-right: 36px;
    }
    .bg-no {
        background: none;
    }
}
.edit-data-btn {
    height: 30px;
    line-height: 30px;
    background: #ffffff0f;
    color: $FontWhite;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
        background: #ffffff33;
    }
}
</style>